<template>
	<div class="pageContainer">
		<el-row class="orderDetails">
			<!--发起售后按钮-->
			<!-- <div style="overflow:hidden; padding:5px">
				<div style="float:left">
					<el-button type="primary" @click="afterSaleBtn" size="mini" round>发起售后</el-button>
				</div>
			</div> -->

			<!--售后列表-->
			<el-table :data="afterSaleData"
			          :size="size"
			          style="width: 100%"
			          align="center"
			          header-align="center"
			          :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">
				<el-table-column prop="afterSaleNo" label="售后单编号" width="200"></el-table-column>
				<el-table-column prop="afterSaleType" label="售后类型" :formatter="typeFormatter">
					 <template slot-scope="scope">
                           <span v-if="scope.row.afterSaleType=='1'">仅退款未发货</span>
                            <span v-if="scope.row.afterSaleType=='2'">仅退款已发货</span>
                            <span v-if="scope.row.afterSaleType=='3'">退款退货</span>
							<span v-if="scope.row.afterSaleType=='4'">换货</span>
                        </template>
				</el-table-column>
				<el-table-column prop="status" label="售后单状态" :formatter="statusFormatter">
					<template slot-scope="scope">
						<span v-if="scope.row.status=='10'">待处理</span>
						<span v-if="scope.row.status=='20'">退货中</span>
						<span v-if="scope.row.status=='30'">退款中</span>
						<span v-if="scope.row.status=='40'">已完成</span>
						<span v-if="scope.row.status=='50'">已拒绝</span>
					</template>
				</el-table-column>
				<el-table-column prop="returnAmount" label="售后单申请退款金额"></el-table-column>
				<el-table-column prop="" label="支付方式"></el-table-column>
				<el-table-column prop="status" label="退款状态">
					<template slot-scope="scope">
						<span v-if="scope.row.status=='10'">待处理</span>
						<span v-if="scope.row.status=='20'">退货中</span>
						<span v-if="scope.row.status=='30'">退款中</span>
						<span v-if="scope.row.status=='40'">已完成</span>
						<span v-if="scope.row.status=='50'">已拒绝</span>
				    </template>
				</el-table-column>
				<el-table-column prop="returnRealAmount" label="实际退款金额"></el-table-column>
				<el-table-column prop="" label="支付方式"></el-table-column>
				<el-table-column prop="" label="退款时间"></el-table-column>
				<el-table-column prop="" label="退款流水号"></el-table-column>
				<el-table-column prop="" label="第三方平台退款流水号"></el-table-column>
				<el-table-column prop="" label="退款类型"></el-table-column>
				<el-table-column prop="returnDistributor" label="退货配送商"></el-table-column>
				<el-table-column prop="returnNumber" label="退货运单号"></el-table-column>
				<el-table-column prop="goodsNum" label="退货收货数量"></el-table-column>
				<el-table-column prop="createTime" label="创建时间"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<kt-button icon="fa fa-search" :label="$t('action.detail')" :size="size" @click="handleDetail(scope.row)" type="success"/>
						<kt-button icon="fa fa-edit " :label="$t('action.edit')" :size="size" @click="handleEdit(scope.row)"/>
						<kt-button icon="el-icon-view" v-if="scope.row.status != 1020" :label="$t('action.cancel')" :size="size" @click="handleCancel(scope.row)"/>
					</template>
				</el-table-column>
				  <!--操作日志分页-->
            <el-pagination
              layout="total, prev, pager, next, jumper,sizes"
              style="float:right;"
              @current-change="handleCurrentChangeOperationInfo"
              @size-change="handleSizeChangeOperationInfo"
              :current-page="orderProcessLogPage.start"
              :page-size="orderProcessLogPage.limit"
              :total="orderAfterSaleApplyTotal"
              :page-sizes="[10, 20, 30, 40]"></el-pagination>
			</el-table>
		</el-row>

		<!--审核页面-->
		<el-dialog :title="operation ? '申请售后' : '修改售后'"
		           :visible.sync="afterSaleDialogVisible"
		           :close-on-click-modal="false"
		           top="7vh"
		           width="80%"
		           center>
			<el-form :model="afterSaleForm" ref="afterSaleForm" label-width="100px" :size="size">
				<el-form-item label="售后类型" prop="afterSaleType">
					<el-radio v-model="afterSaleForm.afterSaleType" label="1">仅退款未发货</el-radio>
					<el-radio v-model="afterSaleForm.afterSaleType" label="2">仅退款已发货</el-radio>
					<el-radio v-model="afterSaleForm.afterSaleType" label="3">退款退货</el-radio>
				</el-form-item>

				<!--商品信息-->
				<el-form-item label-width="0px">
					<div style="float: left">
						<el-table :data="productDetailsData"
						          :size="size"
						          align="center"
						          style="width: 100%"
						          header-align="center"
						          @selection-change="handleSelectionChangeProduct"
						          :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">
							<el-table-column type="selection" v-if="operation" width="55"></el-table-column>
							<el-table-column type="index" label="行号" width="50"></el-table-column>
							<el-table-column prop="goodsImgUrl" label="商品主图" width="100">
								<template slot-scope="scope">
									<img :src="scope.row.goodsImgUrl" height="40px" width="40px"/>
								</template>
							</el-table-column>
							<el-table-column prop="goodsName" label="商品名称" width="400"></el-table-column>
							<el-table-column prop="productCode" label="商品编码" width="150"></el-table-column>
							<el-table-column prop="packageNumber" label="套餐编号" width="80"></el-table-column>
							<el-table-column prop="packageName" label="套餐名" width="150"></el-table-column>
							<el-table-column prop="orderingUnit" label="计件单位" width="80">
								<template slot-scope="scope">
									<span>件</span>
								</template>
							</el-table-column>
							<el-table-column prop="orderQuantity" label="购买数量" width="80">
								<template slot-scope="scope">
									<span>1</span>
								</template>
							</el-table-column>
							<el-table-column prop="quantityShipped" label="可售后数量" width="120"></el-table-column>
							<el-table-column prop="purchaseUnitPrice" label="申请退款金额" width="120"></el-table-column>
						</el-table>
					</div>
				</el-form-item>

				<el-row class="searchDialog-input">
					<el-form-item label="退货原因：" prop="applyReason" width="100%" class="serarch-inner">
						<el-select v-model="afterSaleForm.applyReason" clearable>
							<el-option v-for="item in applyReasonOption" :key="item.code" :label="item.name" :value="item.code"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="申请描述：" prop="applyDetailReason" class="serarch-inner">
						<el-input type="textarea" v-model="afterSaleForm.applyDetailReason" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item label="上传凭证：" prop="proofPics">
						<el-upload v-model="afterSaleForm.proofPics"
						           :on-exceed="handleAfterSaleExceed"
						           :action="imgUpload"
						           :on-success="handleAfterSaleSuccess"
						           :on-remove="handleAfterSaleRemove"
						           :file-list="proofPicsList"
						           :limit="3"
						           list-type="picture-card"
						           accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
						           style="float:left"
						           ref="afterSale_upload">
						<i class="el-icon-plus"></i>
					</el-upload>
				</el-form-item>
				 </el-row>
			</el-form>

			<div slot="footer" class="dialog-footer" style="text-align:center">
				<el-button :size="size" @click.native="afterSaleDialogVisible = false">{{$t('action.cancel')}}</el-button>
				<el-button :size="size" type="primary" v-if="operation" @click.native="afterSaleSubmitForm">{{$t('action.submit')}}</el-button>
				<el-button :size="size" type="primary" v-if="!operation" @click.native="afterSaleUpdateSubmit">{{$t('action.edit')}}</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import KtButton from '@/views/Core/KtButton'

export default {
	components: {
		KtButton,
	},

	props: {
		orderNo: {
			type: String,
			default: ''
		},
	},

	data() {
		return {
			operation: true,                                                            // 新增 : 修改
			size: 'small',
			afterSaleDialogVisible: false,
			applyReasonOption: [
				{code: '拍错/多拍/不想要', name: '拍错/多拍/不想要',},
				{code: '商品降价了', name: '商品降价了'},
				{code: '地址/电话等信息填写错误', name: '地址/电话等信息填写错误'},
				{code: '缺货', name: '缺货'},
				{code: '活动/优惠未生效', name: '活动/优惠未生效'}
			],
			afterSaleData: [],                                                           // 售后信息
			afterSaleTotal: 0,
			orderAfterSaleApplyTotal: 0,
			afterSalePage: {
				'orderNo': '',
				'start': 1,
				'limit': 100,
			},
			afterSaleForm: {
				afterSaleType: '1',
				applyReason: '',
				applyDetailReason: '',
				goodsIdList: [],
				proofPics: ''
			},

			imgUpload: 'http://139.217.220.198:8094/api/upload',
			proofPicsList: [],                                                           // 上传凭证

			multipleSelection: [],	                                                     // 商品明细列表多选框
			productDetailsData: [],                                                      // 商品明细列表
			orderGoodsPage: {
				'orderNo': '',
				'start': 1,
				'limit': 100
			},
			orderAfterSaleApplyPage: {
				'orderNo': '',
				'start': 1,
				'limit': 100
			},                                       // 商品明细
		}
	},

	mounted() {
		this.orderAfterSaleApplyQueryPage()
		this.queryOrderGoodsQuery()
	},

	methods: {
		// 发起售后按钮
		// afterSaleBtn() {
		// 	this.operation = true
		// 	this.afterSaleForm = {
		// 		afterSaleType: '1',
		// 		applyReason: '',
		// 		applyDetailReason: ''
		// 	}
		// 	this.afterSaleDialogVisible = true
		// },

		// 售后提交按钮
		// afterSaleSubmitForm() {
		// 	if (this.multipleSelection.length === 0) {
		// 		return this.$message({message: '请至少选择一行商品', type: 'error'})
		// 	}
		// 	let this_ = this
		// 	let goodsIdList = []
		// 	this_.multipleSelection.forEach(item => {goodsIdList.push(item.goodsId)})
		// 	this.afterSaleForm.goodsIdList = goodsIdList
		// 	this.afterSaleForm.orderNo = this.orderNo
		// 	if (this.proofPicsList.length > 0) {
		// 		this.afterSaleForm.proofPics = ''
		// 		this.proofPicsList.forEach(item => {
		// 			this.afterSaleForm.proofPics += item.url + ','
		// 		})
		// 	}
		// 	this_.utils.request.orderAfterSaleApplyAdd(this.afterSaleForm, function (res) {
		// 		if (res.code == '0000') {
		// 			this_.$message({message: '操作成功', type: 'success'})
		// 			this_.afterSaleDialogVisible = false
		// 			this_.orderAfterSaleApplyQueryPage()
		// 		} else {
		// 			this_.$message({message: '操作失败,' + res.msg, type: 'error'})
		// 		}
		// 	})
		// },

		// 资质上传
		handleAfterSaleSuccess(res) {
			if (res.code = '0000') {
				let imgUrl = {}
				imgUrl.url = res.data.imgUrl
				this.proofPicsList.push(imgUrl)
			}
		},

		//文件上传数量限制
		handleAfterSaleExceed: function () {
			this.$alert('最多上传三个', '警告', {
				confirmButtonText: '确定'
			})
		},

		// 文件移除
		handleAfterSaleRemove(file, proofPicsList) {
			this.proofPicsList = proofPicsList
		},

		// 订单售后申请分页查询
		orderAfterSaleApplyQueryPage() {
			let this_ = this
			this_.afterSalePage.orderNo = this_.orderNo
			this_.utils.request.orderAfterSaleApplyQueryPage(this_.afterSalePage, function (res) {
				if (res.code == '0000') {
					this_.afterSaleData = res.data.rows
					this_.afterSaleTotal = Number(res.data.total)
				}
			})
		},

		// 售后申请详情
		handleDetail(obj) {
			this.$router.push({
				path: '/AftersaleOrderDetail/' + obj.afterSaleNo
			})
		},

		// 售后申请编辑
		handleEdit(obj) {
			this.operation = false
			this.afterSaleDialogVisible = true
			this.afterSaleForm = Object.assign({}, obj)
			this.afterSaleForm.afterSaleType = obj.afterSaleType.toString()
			this.proofPicsList = []
			if (obj.proofPics != '' && obj.proofPics != null) {
				let urlArray = obj.proofPics.split(',')
				urlArray.forEach((item, index) => {
					if (item != '') {
						let obj = {}
						obj.url = item
						obj.name = index
						this.proofPicsList.push(obj)
					}
				})
			}
		},

		// 售后提交修改
		afterSaleUpdateSubmit() {
			let this_ = this
			this_.utils.request.orderAfterSaleApplyUpdate(this.afterSaleForm, function (res) {
				if (res.code == '0000') {
					this_.$message({message: '操作成功', type: 'success'})
					this_.afterSaleDialogVisible = false
					this_.orderAfterSaleApplyQueryPage()
				} else {
					this_.$message({message: '操作失败,' + res.msg, type: 'error'})
				}
			})
		},

		// 售后申请取消
		handleCancel(obj) {
			let params = {}
			params.id = obj.id
			params.status = 1020
			let this_ = this
			this_.$confirm('确认提交吗？', '提示', {}).then(() => {
				this.utils.request.orderAfterSaleApplyUpdate(params, function (res) {
					if (res.code == '0000') {
						this_.$message({message: '操作成功', type: 'success'})
						this_.orderAfterSaleApplyQueryPage()
					} else {
						this_.$message({message: '操作失败,' + res.msg, type: 'error'})
					}
				})
			})
		},

		// 商品明细复选框值
		handleSelectionChangeProduct(val) {
			this.multipleSelection = val
		},

		// 订单商品明细分页
		queryOrderGoodsQuery() {
			let this_ = this
			this_.orderGoodsPage.orderNo = this_.orderNo
			this_.utils.request.queryOrderGoodsQuery(this_.orderGoodsPage, function (res) {
				if (res.code == '0000') {
					this_.productDetailsData = res.data.rows
				}
			})
		},
		 // 订单售后信息
	  orderAfterSaleApplyQuery() {
		  let this_ = this
		   this_.afterSalePage.orderNo = this_.orderNo
		   this_.utils.request.orderAfterSaleApplyQuery(this_.afterSalePage, function(res) {
			   if (res.code == '0000') {
			 	  this_.afterSaleData = res.data.rows
			 	  this_.orderAfterSaleApplyTotal = Number(res.data.total)
         }
		   })
	  },

 		// 订单售后分页
	  handleSizeChangeOperationInfo(val) {
		  this.afterSalePage.start = 1
		  this.afterSalePage.limit = val
		  this.orderAfterSaleApplyQuery()
	  },
	  handleCurrentChangeOperationInfo(val) {
		  this.afterSalePage.start = val
		  this.orderAfterSaleApplyQuery()
    },

		// 1仅退款未发货，2仅退款已发货，3退款退货
		typeFormatter(row, column, prop) {
			if (prop === 1) {
				return '仅退款未发货'
			} else if (prop === 2) {
				return '仅退款已发货'
			} else {
				return '退款退货'
			}
		},

		// 1010:申请退款待处理 1020:取消售后 1030:审核通过 1040:审核拒绝 1050:审核后取消售后 1060:退款中 1070:退款成功',
		statusFormatter(row, column, prop) {
			if (prop === 1010) {
				return '申请退款待处理'
			} else if (prop === 1020) {
				return '取消售后'
			} else if (prop === 1030) {
				return '审核通过'
			} else if (prop === 1040) {
				return '审核拒绝'
			} else if (prop === 1050) {
				return '审核后取消售后'
			} else if (prop === 1060) {
				return '退款中'
			} else if (prop === 1070) {
				return '退款成功'
			}
		}
	},
}
</script>

<style lang="scss" scoped>
	/deep/ .el-select {
		display: block;
		position: relative;
	}

	.page {
		.pageContainer {
			background-color: #f0f3f4; //#f0f3f4

			.orderDetails {
				border: 1px solid #ccc;
				background-color: #fff;
			}
		}
	}
</style>
